<template>
  <div class="design-sidebar">
    <!-- 基础元素区域 -->
    <div class="sidebar-section">
      <div class="section-header">
        <h3>基础元素</h3>
      </div>
      <div class="element-grid">
        <div class="element-item" @click="$emit('add-element', 'rectangle')">
          <div class="element-icon">
            <svg viewBox="0 0 24 24" width="24" height="24">
              <rect x="3" y="3" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2"></rect>
            </svg>
          </div>
          <div class="element-name">矩形</div>
        </div>
        
        <div class="element-item" @click="$emit('add-element', 'circle')">
          <div class="element-icon">
            <svg viewBox="0 0 24 24" width="24" height="24">
              <circle cx="12" cy="12" r="9" fill="none" stroke="currentColor" stroke-width="2"></circle>
            </svg>
          </div>
          <div class="element-name">圆形</div>
        </div>
        
        <div class="element-item" @click="$emit('add-element', 'triangle')">
          <div class="element-icon">
            <svg viewBox="0 0 24 24" width="24" height="24">
              <polygon points="12,3 21,21 3,21" fill="none" stroke="currentColor" stroke-width="2"></polygon>
            </svg>
          </div>
          <div class="element-name">三角形</div>
        </div>
        
        <div class="element-item" @click="$emit('add-element', 'polygon')">
          <div class="element-icon">
            <svg viewBox="0 0 24 24" width="24" height="24">
              <polygon points="12,2 19,7 17,16 7,16 5,7" fill="none" stroke="currentColor" stroke-width="2"></polygon>
            </svg>
          </div>
          <div class="element-name">多边形</div>
        </div>
        
        <div class="element-item" @click="$emit('add-element', 'text')">
          <div class="element-icon">
            <svg viewBox="0 0 24 24" width="24" height="24">
              <text x="5" y="17" fill="currentColor" style="font-size: 14px; font-weight: bold;">T</text>
            </svg>
          </div>
          <div class="element-name">文本</div>
        </div>
        
        <div class="element-item" @click="$emit('add-element', 'line')">
          <div class="element-icon">
            <svg viewBox="0 0 24 24" width="24" height="24">
              <line x1="3" y1="3" x2="21" y2="21" stroke="currentColor" stroke-width="2"></line>
            </svg>
          </div>
          <div class="element-name">直线</div>
        </div>
      </div>
    </div>
    
    <!-- 绘图工具区域 -->
    <div class="sidebar-section">
      <div class="section-header">
        <h3>绘图工具</h3>
      </div>
      <div class="element-list">
        <div class="element-item" @click="$emit('add-element', 'brush')">
          <div class="element-icon">
            <svg viewBox="0 0 24 24" width="24" height="24">
              <path d="M20,2 C18,4 16,6 14,8 L16,10 L14,12 L12,10 C10,12 7,15 7,17 C7,19 5,21 3,21 C7,21 9,17 11,15 L9,13 L11,11 L13,13 C15,11 19,7 20,2 Z" fill="none" stroke="currentColor" stroke-width="2"></path>
            </svg>
          </div>
          <div class="element-name">画笔</div>
        </div>
      </div>
    </div>
    
    <!-- 快捷导航区域 -->
    <div class="sidebar-section">
      <div class="section-header">
        <h3>导航</h3>
      </div>
      <div class="element-list">
        <div class="element-item" @click="$emit('toggle-grid')">
          <div class="element-icon">
            <svg viewBox="0 0 24 24" width="24" height="24">
              <path d="M3,3 L21,3 L21,21 L3,21 L3,3 Z M3,9 L21,9 M3,15 L21,15 M9,3 L9,21 M15,3 L15,21" fill="none" stroke="currentColor" stroke-width="2"></path>
            </svg>
          </div>
          <div class="element-name">显示网格</div>
        </div>
        
        <div class="element-item" @click="$emit('toggle-ruler')">
          <div class="element-icon">
            <svg viewBox="0 0 24 24" width="24" height="24">
              <path d="M2,8 L22,8 M4,5 L4,11 M8,5 L8,11 M12,5 L12,11 M16,5 L16,11 M20,5 L20,11" fill="none" stroke="currentColor" stroke-width="2"></path>
            </svg>
          </div>
          <div class="element-name">显示标尺</div>
        </div>
      </div>
    </div>
    
    <!-- 颜色选择区域 -->
    <div class="sidebar-section">
      <div class="section-header">
        <h3>颜色</h3>
      </div>
      <div class="color-picker">
        <input
          type="color"
          v-model="selectedColor"
          @change="emitColorChange"
          class="color-input"
        />
        <div class="color-preview" :style="{ backgroundColor: selectedColor }"></div>
        <div class="color-value">{{ selectedColor }}</div>
      </div>
      <div class="color-presets">
        <div
          v-for="color in colorPresets"
          :key="color"
          class="color-preset"
          :style="{ backgroundColor: color }"
          @click="selectPresetColor(color)"
        ></div>
      </div>
    </div>
    
    <!-- 素材区域 -->
    <div class="sidebar-section">
      <div class="section-header">
        <h3>素材</h3>
      </div>
      <div class="materials-grid">
        <div
          v-for="material in materials"
          :key="material.id"
          class="material-item"
          @click="$emit('add-material', material)"
        >
          <img :src="material.thumbnail" :alt="material.name" class="material-thumbnail" />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';

// 颜色选择
const selectedColor = ref('#FF5722');
const colorPresets = [
  '#F44336', '#E91E63', '#9C27B0', '#673AB7', 
  '#3F51B5', '#2196F3', '#03A9F4', '#00BCD4',
  '#009688', '#4CAF50', '#8BC34A', '#CDDC39',
  '#FFEB3B', '#FFC107', '#FF9800', '#FF5722'
];

function emitColorChange() {
  emit('color-change', selectedColor.value);
}

function selectPresetColor(color) {
  selectedColor.value = color;
  emitColorChange();
}

// 素材列表
const materials = [
  {
    id: 1,
    name: '购物袋',
    thumbnail: 'https://via.placeholder.com/50?text=材料1',
    url: 'https://svgsilh.com/svg/1414279.svg'
  },
  {
    id: 2,
    name: '礼品盒',
    thumbnail: 'https://via.placeholder.com/50?text=材料2',
    url: 'https://svgsilh.com/svg/1265945.svg'
  },
  {
    id: 3,
    name: '商店',
    thumbnail: 'https://via.placeholder.com/50?text=材料3',
    url: 'https://svgsilh.com/svg/2722167.svg'
  },
  {
    id: 4,
    name: '标签',
    thumbnail: 'https://via.placeholder.com/50?text=材料4',
    url: 'https://svgsilh.com/svg/157353.svg'
  }
];

// 事件处理
const emit = defineEmits([
  'add-element',
  'toggle-grid',
  'toggle-ruler',
  'color-change',
  'add-material'
]);
</script>

<style scoped>
.design-sidebar {
  padding: 10px;
  height: 100%;
  overflow-y: auto;
}

.sidebar-section {
  margin-bottom: 20px;
}

.section-header {
  margin-bottom: 10px;
  border-bottom: 1px solid #e0e0e0;
  padding-bottom: 5px;
}

.section-header h3 {
  margin: 0;
  font-size: 14px;
  color: #333;
}

/* 元素网格 */
.element-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.element-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.element-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  padding: 5px;
  border-radius: 4px;
  transition: background-color 0.2s;
}

.element-item:hover {
  background-color: #e0e0e0;
}

.element-icon {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 4px;
  color: #666;
}

.element-name {
  font-size: 12px;
  color: #666;
  text-align: center;
}

/* 颜色选择器 */
.color-picker {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.color-input {
  opacity: 0;
  position: absolute;
  cursor: pointer;
}

.color-preview {
  width: 40px;
  height: 24px;
  border-radius: 4px;
  margin-right: 10px;
  border: 1px solid #e0e0e0;
  cursor: pointer;
  position: relative;
}

.color-preview::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 3px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.1);
}

.color-value {
  font-size: 12px;
  color: #666;
}

.color-presets {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 5px;
}

.color-preset {
  width: 20px;
  height: 20px;
  border-radius: 4px;
  cursor: pointer;
  border: 1px solid #e0e0e0;
}

/* 素材区域 */
.materials-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.material-item {
  cursor: pointer;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  overflow: hidden;
  transition: transform 0.2s;
}

.material-item:hover {
  transform: scale(1.05);
}

.material-thumbnail {
  width: 100%;
  height: auto;
  display: block;
}
</style>